import utils from "service/utils";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import {
  swiperAnimateCache,
  swiperAnimate,
  clearSwiperAnimate,
} from "static/js/swiper.animate";
import Loading from "service/Loading.vue";
import PopUp from "components/PopUp.vue";

const baseCompent = {
  created() {},
  watch: {
    /*showStar(newValue, oldValue){
            console.info(this.Star)
        }*/
  },
  components: {
    Swiper,
    SwiperSlide,
    PopUp,
    Loading,
  },
  computed: {
    swiper() {
      return this.$refs.Swiper.swiperInstance;
    },
  },
  data() {
    let that = this;
    return {
      formBool: false,
      hasLoading: false,
      play: false,
      playShow: false,
      /*基础数据*/
      progress: "0%", //进度
      sVisible: true, //开始加载
      tipsWord: "", //提示语
      tipsBool: false, //提示是否可见
      //interleaveOffset:0.5,
      swiperOption: {
        direction: "vertical",
        effect: "fade",
        //loop:true,
        fadeEffect: {
          crossFade: true,
        },
        resistanceRatio: 0,
        initialSlide: 0,
        //touchRatio:2,
        touchMoveStopPropagation: false,
        speed: 500,
        //freeMode: true,
        on: {
          init() {
            //this.allowSlidePrev=false;
            //this.allowSlideNext=false;
            swiperAnimateCache(this); //隐藏动画元素
            swiperAnimate(this);
            that.swiperChange(this);
          },
          slideChangeTransitionStart() {
            swiperAnimate(this);
            that.swiperChange(this);
          },
          slideChangeTransitionEnd() {
            clearSwiperAnimate(this);
          },
        },
      },
      swiperInBack: {
        swiper1(swiper) {
          //that.swiper.allowSlidePrev=false;
          //that.swiper.allowSlideNext=false;
        },
      },
      swiperOutBack: {
        swiper0() {},
      },
    };
  },
  mounted() {
    window.painter = this;
    let that = this;
    that.$nextTick(function () {
      that.resizeFullPage();
      $("input,select,textarea").blur(function () {
        that.scrollTop();
      });
      let imgs = document.getElementsByTagName("img");
      for (let i = 0; i < imgs.length; i++) {
        imgs[i].addEventListener("click", function (e) {
          e.preventDefault();
        });
      }
    });
  },
  methods: {
    scrollTop() {
      setTimeout(() => {
        let scrollHeight =
          document.documentElement.scrollTop || document.body.scrollTop || 0;
        window.scrollTo(0, Math.max(scrollHeight - 1, 0));
      }, 100);
    },
    resizeFullPage() {
      let that = this;
      /**********************************/
      let bwidth = 750;
      let nheight = 1260;
      let bheight = 1624;
      /**********************************/
      utils.width = document.documentElement.clientWidth;
      utils.height = document.documentElement.clientHeight;

      let size = utils.height / utils.width;
      let fullPage = $(".fullPage");
      let partPage = $(".partPage");
      $(".formView").css({ minHeight: utils.height + "px" });
      let scale = utils.width / bwidth;
      let pscale = 1;
      if (size < nheight / bwidth) {
        pscale = utils.height / (nheight * scale);
      }
      partPage.css({
        width: bwidth + "px",
        height: nheight + "px",
        left: 0,
        top: (bheight - nheight) / 2 + "px",
        scale: pscale,
      });
      fullPage.css({
        width: bwidth + "px",
        height: bheight + "px",
        left: (utils.width - bwidth) / 2,
        top: (utils.height - bheight) / 2,
        scale: scale,
      });
      if (utils.height / utils.width > bheight / bwidth) {
        fullPage.css({
          scaleY: (utils.height * bwidth) / (utils.width * bheight),
        });
      }
    },
    nextPage() {
      this.slideToPage();
    },
    prevPage() {
      let activeIndex = this.swiper.activeIndex;
      this.slideToPage(activeIndex - 1);
    },
    shareBtn() {
      this.shareBool = true;
    },
    slideToPage(number, time) {
      let activeIndex = this.swiper.activeIndex;
      let nextIndex = isNaN(number) ? activeIndex + 1 : parseInt(number);
      let speed = time || time == 0 ? time : this.swiper.params.speed;
      this.swiper.slideTo(nextIndex, speed);
    },
    showTips(word, time, callback) {
      let that = this;
      that.tipsWord = word;
      that.tipsBool = true;
      let tm = typeof time == "number" ? time : 1000;
      let cb = typeof time == "function" ? time : callback;
      setTimeout(() => {
        that.tipsBool = false;
        if (typeof cb == "function") cb.apply(this);
      }, tm);
    },
    hideTips() {
      this.tipsBool = false;
    },
    musicBtn() {
      if (this.play) {
        this.play = false;
        this.bgMusic.stop();
      } else {
        this.play = true;
        this.bgMusic.play();
      }
    },
    swiperChange(swiper) {
      let funcIn = this.swiperInBack["swiper" + swiper.activeIndex];
      if (utils.isFunction(funcIn)) {
        eval(funcIn).call();
      }
      let curIndex = parseInt(swiper.activeIndex);
      let prevIndex = curIndex - 1;
      if (swiper.swipeDirection == "prev") {
        prevIndex = curIndex + 1;
      }
      let funcOut = this.swiperOutBack["swiper" + prevIndex];
      if (utils.isFunction(funcOut)) {
        eval(funcOut).call();
      }
    },
    startLoading() {
      let that = this,
        queue;
      if (this.hasLoading) return false;
      try {
        queue = new createjs.LoadQueue(false);
      } catch (e) {
        that.hasLoading = false;
        return false;
      }
      that.hasLoading = true;
      queue.installPlugin(createjs.Sound);
      queue.on("progress", function (evt) {
        let progress = evt.progress;
        that.progress = parseInt(progress * 100) + "%";
      });
      queue.on("complete", function () {
        setTimeout(function () {
          that.loadSuccess();
        }, 500);
      });
      //queue.loadFile({id:"bgm", src:"static/audio/bgm.mp3"});
      //queue.loadFile({id:"font", src:"http://h5.wufae.com/Chevrolet/upload/static/css/fang.ttf"});
      queue.on("fileload", (evt) => {
        if (evt.item.id == "bgm") {
          this.bgMusic = createjs.Sound.play("bgm", {
            loop: -1,
            volume: 0.5,
          });
          this.play = true;
          this.playShow = true;
        }
      });
      queue.loadManifest([{ src: "static/imgs/bg.jpg" }]);
    },
    loadOthers() {
      let that = this,
        queue;
      if (this.otherLoading) return false;
      try {
        queue = new createjs.LoadQueue(false);
      } catch (e) {
        that.otherLoading = false;
        return false;
      }
      that.otherLoading = true;
      const resourceList = [
        { src: "static/imgs/bg1a.jpg" },
        { src: "static/imgs/bg1b.jpg" },
        { src: "static/imgs/g/g1.png" },
        { src: "static/imgs/g/g1a.png" },
        { src: "static/imgs/g/g2.png" },
        { src: "static/imgs/g/g2a.png" },
        { src: "static/imgs/g/g3.png" },
        { src: "static/imgs/g/g3a.png" },
        { src: "static/imgs/g/g4.png" },
        { src: "static/imgs/g/g4a.png" },
        { src: "static/video/video.mp4" },
        { src: "static/imgs/poster/p1-1.jpg" },
        { src: "static/imgs/poster/p1-2.jpg" },
        { src: "static/imgs/poster/p1-3.jpg" },
        { src: "static/imgs/poster/p1-4.jpg" },
        { src: "static/imgs/poster/p1-5.jpg" },
        { src: "static/imgs/poster/p1-6.jpg" },
        { src: "static/imgs/poster/p1-7.jpg" },
        { src: "static/imgs/poster/p1-8.jpg" },
        { src: "static/imgs/poster/p2-1.jpg" },
        { src: "static/imgs/poster/p2-2.jpg" },
        { src: "static/imgs/poster/p2-3.jpg" },
        { src: "static/imgs/poster/p2-4.jpg" },
        { src: "static/imgs/poster/p2-5.jpg" },
        { src: "static/imgs/poster/p2-6.jpg" },
        { src: "static/imgs/poster/p2-7.jpg" },
        { src: "static/imgs/poster/p2-8.jpg" },
        { src: "static/imgs/poster/p3-1.jpg" },
        { src: "static/imgs/poster/p3-2.jpg" },
        { src: "static/imgs/poster/p3-3.jpg" },
        { src: "static/imgs/poster/p3-4.jpg" },
        { src: "static/imgs/poster/p3-5.jpg" },
        { src: "static/imgs/poster/p3-6.jpg" },
        { src: "static/imgs/poster/p3-7.jpg" },
        { src: "static/imgs/poster/p3-8.jpg" },
        { src: "static/imgs/poster/p4-1.jpg" },
        { src: "static/imgs/poster/p4-2.jpg" },
        { src: "static/imgs/poster/p4-3.jpg" },
        { src: "static/imgs/poster/p4-4.jpg" },
        { src: "static/imgs/poster/p4-5.jpg" },
        { src: "static/imgs/poster/p4-6.jpg" },
        { src: "static/imgs/poster/p4-7.jpg" },
        { src: "static/imgs/poster/p4-8.jpg" },
      ];
      queue.loadManifest(resourceList);
    },
    // 加载完成的回调函数
    loadSuccess() {
      let that = this;
      that.resizeFullPage();
      $("[imgSrc]").each(function (idx, item) {
        $(item).attr("src", $(item).attr("imgSrc"));
      });
      $("[bgSrc]").each(function (idx, item) {
        $(item).css({
          "background-image": "url(" + $(item).attr("bgSrc") + ")",
        });
      });
      that.slideToPage(0, 0);
      that.sVisible = false;
      that.loadOthers();
      //that.slideToPage(2,0);
    },
  },
};
export default baseCompent;
